<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <title>访客登记列表</title>
    <script src="${pageContext.request.contextPath}/static/jquery/jquery-3.1.1.js"></script>
    <script src="${pageContext.request.contextPath}/static/jquery/jquery.validate.js"></script>
    <link rel="stylesheet" href="/static/frame/layui/css/layui.css">
    <link rel="stylesheet" href="/static/frame/static/css/style.css">
    <link rel="icon" href="/static/frame/static/image/code.png">
</head>
<style>

    .shelter{
        width:100%;
        height: 100%;
        position: fixed;
        z-index: 50;
        background-color: rgba(0,0,0,0.2);
        display: none;
    }
    .confirm{
        position: absolute;
        width:300px;
        height:150px;
        background-color: rgba(255,255,255,1);
        border-radius:5px;
        margin-left:48%;
        margin-top:15%;
        border:1px solid #CCC;
    }
    .tishiph{
        position: absolute;
        width:18px;
        height:18px;
        margin-left:80px;
        margin-top:40px;
    }
    .tishiph1{
        position: absolute;
        width:18px;
        height:18px;
        margin-left:92px;
        margin-top:40px;
    }
    .confirmword{
        position: absolute;
        font-size: 14px;
        margin-left:105px;
        margin-top:40px;
        color:red;
    }
    .confirmword1{
        position: absolute;
        font-size: 14px;
        margin-left:117px;
        margin-top:40px;
    }
    .close{
        position: absolute;
        margin-left:278px;
        font-size:17px;
        cursor: pointer;
        margin-top:5px;
        width:17px;
        height:17px;
        opacity:0.8;
    }
    .close1{
        position: absolute;
        margin-left:278px;
        font-size:17px;
        cursor: pointer;
        margin-top:5px;
        width:17px;
        height:17px;
        opacity:0.8;
    }
    .cf{
        position: absolute;
        width:120px;
        height:25px;
        margin-left:95px;
        margin-top: 100px;
        font-size:13px;
        border:0px solid #333;
        border-radius:5px;
        text-align: center;
        line-height: 2;
        cursor: pointer;
        background-color: rgba(10,180,0,0.8);
        color:white;
    }
    .cf1{
        position: absolute;
        width:120px;
        height:25px;
        margin-left:95px;
        margin-top: 100px;
        font-size:13px;
        border:0px solid #333;
        border-radius:5px;
        text-align: center;
        line-height: 2;
        cursor: pointer;
        background-color: rgba(10,180,0,0.8);
        color:white;
    }
    .shelter1{
        width:100%;
        height: 100%;
        position: fixed;
        z-index: 50;
        background-color: rgba(0,0,0,0.2);
        display: none;
    }
    .succ{
        position: absolute;
        width:300px;
        height:150px;
        background-color: rgba(255,255,255,1);
        border-radius:5px;
        margin-left:48%;
        margin-top:15%;
        border:1px solid #CCC;
    }
</style>
<body>
<div style="margin-top: 10px;margin-left: 10px">注：1、无输入查询即为查询全部；2、访客查询为查询其中一个访客，故查询结果可能为多个；3、用户查询为精确查询，但请根据具体住址自行区分</div>
<div>
    <form action="visitorListByVisitor.do" method="post" style="float: left;margin-right: 20px;margin-top: 5px;margin-bottom: 5px;margin-left: 5px">
    <input type="text" name="visitor_name" style="height: 40px;padding-left:5px;font-size: 16px" class="selectbox" placeholder="访客姓名 / Name"/>
    <input type="submit" style="padding-top: 7px;padding-bottom: 9px;" value="查询访客姓名" class="selectbutton"/>
    </form>
    <form action="/visitorListByUser.do" method="post" style="float:left;margin-left:20px;margin-top: 5px;margin-bottom:5px">
        <input type="text" name="visitor_user_name" style="height: 40px;padding-left:5px;font-size: 16px" class="selectbox" placeholder="用户姓名 / Name"/>
        <input type="submit" style="padding-top: 7px;padding-bottom: 9px" value="查询用户姓名" class="selectbutton"/>
    </form>
</div>
    <div class="shelter">
        <div class="confirm">
            <div class="tishiph"><img src="${pageContext.request.contextPath}/static/images/tishi.png" style="width:100%;height:100%;"/></div>
            <div class="confirmword">操作失败！</div>
            <div class="close"><img src="${pageContext.request.contextPath}/static/images/close.png" style="width:100%;height:100%;"/></div>
            <input type="button" class="cf" value="确定"/>
        </div>
    </div>
    <div class="shelter1">
        <div class="succ">
            <div class="tishiph1"><img src="${pageContext.request.contextPath}/static/images/cg.png" style="width:100%;height:100%;"/></div>
            <div class="confirmword1">操作成功！</div>
            <div class="close1"><img src="${pageContext.request.contextPath}/static/images/close.png" style="width:100%;height:100%;"/></div>
            <input type="button" class="cf1" value="确定"/>
        </div>
    </div>
    <div class="showmessages">
        <table class="layui-table">
            <thead>
            <tr>
                <th style="width: 80px;">访客记录ID</th>
                <th style="width: 150px;">访客姓名</th>
                <th style="width: 80px;">访客人数</th>
                <th style="width: 80px;">所属用户姓名</th>
                <th style="width: 80px;">用户住所</th>
                <th style="width: 150px;">报备时间</th>
                <th style="width: 150px;">预计到访时间</th>
                <th style="width: 150px">操作</th>
            </tr>
            </thead>
            <tbody id="clear" style="display: none">
            <script>var arr1=[]</script>
            <c:if test="${not empty sessionScope.visitorList}">
            <c:forEach items="${sessionScope.visitorList}" var="o"  varStatus="loop">
                <tr id="visorder${loop.count}">
                    <td>${loop.count}</td>
                    <td>${o.getVisitor_name()}</td>
                    <td>${o.getVisitor_number()}</td>
                    <td>${sessionScope.visitorUserList[loop.count-1].user_name}</td>
                    <td>${sessionScope.visitorHostList[loop.count-1].host_building}栋${sessionScope.visitorHostList[loop.count-1].host_unit}单元${sessionScope.visitorHostList[loop.count-1].host_housenumber}号</td>
                    <td class="createtime">${o.getVisitor_createtime()}</td>
                    <td class="visitetime">${o.getVisitor_time()}</td>
                    <td>
                        <form method="post">
                            <div style="float:left;margin-right: 10px">
                                <input type="button" value="确认到访" class="layui-btn layui-btn-mini layui-btn-normal" onclick="confirm(this,${o.getVisitor_id()})" style="background-color: rgba(10,150,40,0.8);height:35px;width:80px;"/>
                            </div>
                        </form>
                        <form method="post">
                            <div>
                                <input type="button" value="删除" class="layui-btn layui-btn-mini layui-btn-normal" onclick="deletevisitor(this,${o.getVisitor_id()})" style="background-color: rgba(255,0,0,0.8);height:35px;width:50px;"/>
                            </div>
                        </form>
                    </td>
                </tr>
                <script>arr1.push($("#visorder${loop.count}")[0])</script>
            </c:forEach>
            </c:if>
            </tbody>
            <tbody id="biuuu_city_list"></tbody>
        </table>
        <div id="demo20"></div>
    </div>

</body>
<script src="${pageContext.request.contextPath}/static/frame/layui/layui.js" charset="utf-8"></script>
<script>
    function nodeToString ( node ) {
        var tmpNode = document.createElement( "div" );
        tmpNode.appendChild( node.cloneNode( true ) );
        var str = tmpNode.innerHTML;
        tmpNode = node = null; // prevent memory leaks in IE
        return str;
    }
    function clear(){
        document.getElementById('clear').innerHTML=null;
    }

    layui.use(['carousel', 'laypage','laydate','form','upload','jquery'], function(){
        var carousel = layui.carousel
            ,form = layui.form
            ,$=layui.jquery
            ,upload = layui.upload
            ,laypage = layui.laypage
            ,laydate=layui.laydate

        //常规轮播
        carousel.render({
            elem: '#test1'
            ,arrow: 'always'
        });
        var data1= arr1;
        laypage.render({
            elem: 'demo20'
            ,count: data1.length
            ,jump: function(obj){
                //模拟渲染
                document.getElementById('biuuu_city_list').innerHTML = function(){
                    var arr = []
                        ,thisData = data1.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
                    layui.each(thisData, function(index, item){
                        var itemstr=nodeToString(item);
                        arr.push(itemstr);
                    });
                    clear();
                    return arr.join('');
                }();
            }
        });
        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });

    });
</script>
<script>
    var w=$(window).width();
    var h=$(window).height();
    $(".pageall").innerHeight(h+"px");
    $(".pageall").innerWidth(w+"px");
    $(".close").click(function(){
        $(".shelter").css("display","none");
    });
    $(".close1").click(function(){
        $(".shelter1").css("display","none");
        window.location.href="${pageContext.request.contextPath}/visitorListAble";
    });
    function confirm(e,value){
        $.ajax({
            type:'POST',
            url:"${pageContext.request.contextPath}/confirmVisitor.do",
            data:{
                visitor_id:value,
            },
            dataType:"json",
            success:function(data){
                if(data==true){
                    $(".shelter1").css("display","block");
                    $(".cf1").click(function() {
                        $.ajax({
                            type:'POST',
                            url:"${pageContext.request.contextPath}/visitorflush.do",
                            data:"",
                            dataType:"json",
                            success:function(data){
                                if(data==true){
                                    window.location.href="${pageContext.request.contextPath}/visitorListAble";
                                    location.reload(true);
                                }
                            }
                        });
                    });
                }if(data==false){
                    $(".shelter").css("display","block");
                    $(".cf").click(function(){
                        $(".shelter").css("display","none");
                    });
                }
            }
        });
    }
    function deletevisitor(e,value){
        $.ajax({
            type:'POST',
            url:"${pageContext.request.contextPath}/deleteVisitor.do",
            data:{
                visitor_id:value,
            },
            dataType:"json",
            success:function(data){
                if(data==true){
                    $(".shelter1").css("display","block");
                    $(".cf1").click(function() {
                        $.ajax({
                            type:'POST',
                            url:"${pageContext.request.contextPath}/visitorflush.do",
                            data:"",
                            dataType:"json",
                            success:function(data){
                                if(data==true){
                                    window.location.href="${pageContext.request.contextPath}/visitorListAble";
                                    location.reload(true);
                                }
                            }
                        });
                    });
                }if(data==false){
                    $(".shelter").css("display","block");
                    $(".cf").click(function(){
                        $(".shelter").css("display","none");
                    });
                }
            }
        });
    }
    /**
     * 时间显示，调整格式
     */
    showtime();
    function showtime() {
        var createtime=$(".createtime");
        var visitetime=$(".visitetime");
        createtime.each(function () {
            //调用时间格式转换函数formatDateTime()
            $(this).text(formatDateTime($(this).text()))
        });
        visitetime.each(function () {
            //调用时间格式转换函数formatDateTime()
            $(this).text(formatDateTime($(this).text()))
        })
    }
    /**
     *
     * 在页面上，转换时间格式
     * @param inputTime
     * @returns {string}
     */
    function formatDateTime(inputTime) {
        var date = new Date(inputTime);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        var d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        var h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        var minute = date.getMinutes();
        var second = date.getSeconds();
        minute = minute < 10 ? ('0' + minute) : minute;
        second = second < 10 ? ('0' + second) : second;
        return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
    };

</script>
</html>